<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery手机发送验证码倒计时代码</title>
    <link href="{{css_prefix}}/css/style.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="form">
    <div class="div-name">
        <label for="name">用户名</label><input type="text" id="name" class="infos" placeholder="请输入用户名">
    </div>
    <div class="div-phone">
        <label for="phone">手机</label><input type="text" id="phone" class="infos" placeholder="请输入手机">
        <a href="javascript:;" class="send1" onclick="sends.send();">发送验证码</a>
    </div>
    <div class="div-ranks">
        <label for="ranks">验证码</label><input type="text" id="ranks" class="infos" placeholder="请输入验证码">
    </div>
    <div class="div-conform">
        <a href="javascript:;" class="conform" onclick="sends.conform();">提交</a>
    </div>
</div>

<script type="text/javascript" src="./resource/jquery/jquery.min.js"></script>
<script type="text/javascript">
    (function(){
        var time = 0;

        function create_url(plugin,method){
            return 'index.php?plugin=mobile_code&method=compare_code';
        }

        var sends = {

            checked:1,
            send:function(){
                if(time>0){return;}

                var numbers = /^1\d{10}$/;
                var val = $('#phone').val().replace(/\s+/g,""); //获取输入手机号码
                if($('.div-phone').find('span').length == 0 && $('.div-phone a').attr('class') == 'send1'){
                    if(!numbers.test(val) || val.length ==0){
                        $('.div-phone').append('<span class="error">手机格式错误</span>');
                        return false;
                    }
                }

                if(numbers.test(val)){
                    time=30;
                    //ajax执行发送  直接调用plugin
                    $.post('index.php?plugin=mobile_code&method=send_demo',{phone:val},function(data){
                        console.log(data);
                    });

                    $('.div-phone span').remove();
                    function timeCountDown(){
                        if(time==0){
                            clearInterval(timer);
                            $('.div-phone a').addClass('send1').removeClass('send0').html("发送验证码");
                            sends.checked = 1;
                            return true;
                        }
                        $('.div-phone a').html(time+"秒后再次发送");
                        time--;
                        return false;
                        sends.checked = 0;
                    }
                    $('.div-phone a').addClass('send0').removeClass('send1');
                    timeCountDown();
                    var timer = setInterval(timeCountDown,1000);
                }
            },
            conform:function(){ //验证
                var code=$('#ranks').val();
                $.post(create_url('mobile_code','compare_code'),{code:code},function(data){
                    console.log(data);
                    data=JSON.parse(data);
                    alert(data.msg);
                });
            }
        }
        this.sends=sends;
    })();
</script>
</body>
</html>